<%--
  Created by IntelliJ IDEA.
  User: 32210
  Date: 2024/6/25
  Time: 14:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/WEB-INF/jsp/common/common_css.jsp"></jsp:include>
<style>
    form {
        position: relative;
        text-align: center;
        min-width: 400px;
        width: 30%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        align-items: center;
        background: transparent;
        backdrop-filter: blur(10px);
        grid-gap: 10px;
        padding: 30px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 30px;
    }

    form input.form-btn {
        margin: 0 auto;
        height: 50px;
        width: 100px;
        border-radius: 10px;
        border: none;
        outline: none;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
        background-image: linear-gradient(to right, #0089ff, #00bfff);
        filter: drop-shadow(0 0 5px #0089ff);
        color: white;
    }

    form input.form-btn:hover {
        background: #0089ff;
        color: white;
    }

    form input.form-btn:active {
        background: #0089ff;
        color: white;
        transform: translateY(2px);
    }

    form input.form-item {
        margin: 0 auto;
        height: 50px;
        width: 200px;
        border-radius: 10px;
        outline: none;
        font-size: 16px;
        padding: 0 15px;
        border: 1px solid #0089ff;
        color: #ffffff;
        filter: drop-shadow(0 0 5px #0089ff);
        background-image: linear-gradient(to right, #0089ff, #00bfff);
    }

    form input.form-item::placeholder {
        color: #ccc;
        font-size: 16px;
        font-weight: bold;
    }

    form input.form-item[error] {
        border: 1px solid red;
        background-image: linear-gradient(to right, red, #ff0000);
        filter: drop-shadow(0 0 5px red);
    }

    form h2.title {
        grid-column: 1 / span 2;
        font-size: 30px;
        font-weight: bold;
        color: #0089ff;
        margin-bottom: 20px;
    }

    form span.to-login {
        grid-column: 1 / span 2;
        text-align: right;
        color: #0089ff;
    }

    form span.to-login a {
        font-size: 12px;
    }

    form select.form-item {
        margin: 0 auto;
        height: 50px;
        width: 200px;
        border-radius: 10px;
        outline: none;
        font-size: 16px;
        padding: 0 15px;
        border: 1px solid #0089ff;
        color: white;
        filter: drop-shadow(0 0 5px #0089ff);
        background-image: linear-gradient(to right, #0089ff, #00bfff);
    }

    form select.form-item option {
        background-image: linear-gradient(to right, #0089ff, #00bfff);
        color: black;
    }

</style>